<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title>丛林迷宫编辑器</title>
    <style>
        /* 全局CSS变量 */
        :root {
            --cell-size: 40px;
        }
        
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        h1, h2, h3 {
            color: #333;
        }

        /* 设置区域样式 */
        .settings {
            margin-bottom: 20px;
            padding: 15px;
            background-color: #f9f9f9;
            border-radius: 5px;
        }

        .settings input {
            padding: 8px;
            margin-right: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .settings button {
            padding: 8px 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .settings button:hover {
            background-color: #45a049;
        }

        /* 图符按钮样式 */
        .tile-buttons {
            margin-bottom: 15px;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .tile-btn {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #fff;
            border: 2px solid #ccc;
            border-radius: 5px;
            cursor: pointer;
        }

        .tile-btn.selected {
            border-color: #4CAF50;
            background-color: #e8f5e9;
        }

        /* 网格样式 */
        .grid-wrapper {
            position: relative;
            display: inline-block;
        }

        .grid {
            display: grid;
            gap: 2px;
            background-color: #ddd;
            padding: 5px;
            border-radius: 5px;
            position: relative;
        }
        /* 网格单元格样式 */
        .grid-cell {
            width: var(--cell-size);
            height: var(--cell-size);
            background-color: #fff;
            border: 1px solid #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: calc(var(--cell-size) * 0.5); /* 字体大小与单元格成正比 */
            cursor: pointer;
            position: relative;
        }

        /* 内容为0的格子背景色（与虚拟单元格相同） */
        .grid-cell.value-0 {
            background-color: #f0f0f0;
        }        

        .grid-cell:hover {
            background-color: #f0f0f0;
        }

        .grid-cell.selected {
            background-color: #ffebee;
        }

        /* 虚拟单元格（用于边界障碍物选择） */
        .virtual-cell {
            width: var(--cell-size);
            height: var(--cell-size);
            background-color: #f0f0f0;
            border: 1px dashed #999;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: calc(var(--cell-size) * 0.3); /* 字体大小与单元格成正比 */
            color: #999;
            cursor: pointer;
            position: relative;
        }

        /* 障碍设置提示样式 */
        .obstacle-hint {
            margin-top: 10px;
            padding: 10px;
            background-color: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 5px;
            display: none;
        }

        /* 障碍物可视化样式 */
        .obstacle-layer {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            z-index: 10;
        }
        
        /* 障碍物线条样式 */
        .obstacle-line {
            position: absolute;
            background-color: #f44336;
            z-index: 10;
            border-radius: 2px;
        }
        
        /* 水平障碍物 - 绘制在两个格子之间的水平接触边 */
        .obstacle-line.horizontal {
            height: 4px;
            width: 44px;
            background-color: #f44336;
        }
        
        /* 垂直障碍物 - 绘制在两个格子之间的垂直接触边 */
        .obstacle-line.vertical {
            width: 4px;
            height: 44px;
            background-color: #f44336;
        }

        /* JSON输出区域样式 */
        .json-output {
            margin-top: 20px;
        }

        textarea {
            width: 100%;
            height: 200px;
            padding: 10px;
            font-family: monospace;
            font-size: 14px;
            border: 1px solid #ccc;
            border-radius: 5px;
            resize: vertical;
            box-sizing: border-box;
        }

        /* 链接样式 */
        .back-link {
            text-align: center;
            margin-top: 20px;
        }

        .back-link a {
            color: #4CAF50;
            text-decoration: none;
        }

        .back-link a:hover {
            text-decoration: underline;
        }

        /* 障碍物列表样式 */
        .obstacle-list {
            margin-top: 20px;
            padding: 15px;
            background-color: #f9f9f9;
            border-radius: 5px;
        }

        .obstacle-list h3 {
            margin-top: 0;
            color: #333;
        }

        .obstacle-item {
            padding: 5px 0;
            border-bottom: 1px solid #eee;
        }

        .obstacle-item:last-child {
            border-bottom: none;
        }

        .remove-obstacle {
            background-color: #f44336;
            font-size: 12px;
            padding: 2px 8px;
            margin-left: 10px;
        }

        .remove-obstacle:hover {
            background-color: #d32f2f;
        }

        /* 调试日志区域样式 */
        .debug-log {
            margin-top: 20px;
            padding: 15px;
            background-color: #f1f1f1;
            border-radius: 5px;
        }

        .debug-log textarea {
            background-color: #222;
            color: #0f0;
            font-family: monospace;
            font-size: 12px;
        }

        /* 增加移动设备响应式调整 */
        @media (max-width: 600px) {
            body {
                padding: 10px;
            }
            
            .container {
                padding: 15px;
                border-radius: 5px;
                max-width: 100%;
            }
            
            .grid-wrapper {
                overflow-x: auto;
                padding-bottom: 10px;
            }
            
            .grid {
                min-width: min-content;
            }
            
            /* 调整按钮和输入框大小 */
            .settings input {
                width: 50px;
                margin-right: 5px;
                margin-bottom: 5px;
            }
            
            .settings button {
                padding: 8px 10px;
                font-size: 14px;
                margin-bottom: 5px;
            }
        }

    </style>
</head>
<body>
    <div class="container">
        <h1>丛林迷宫编辑器</h1>
        
        <!-- 设置区域 -->
        <div class="settings">
            <h3>网格设置</h3>
            <div>
                <label for="grid-width">宽度:</label>
                <input type="number" id="grid-width" value="5" min="3" max="20">
                <label for="grid-height">高度:</label>
                <input type="number" id="grid-height" value="5" min="3" max="20">
                <label for="step-limit">步数限制:</label>
                <input type="number" id="step-limit" value="20" min="1">
                <button onclick="createGrid()">创建网格</button>
                <button onclick="clearAllObstacles()" style="background-color: #f44336;">清除所有障碍物</button>
            </div>
        </div>
        
        <!-- 图符选择区域 -->
        <div class="tile-selection">
            <h3>选择图符:</h3>
            <div class="tile-buttons">
                <button class="tile-btn" data-value="0">0</button>
                <button class="tile-btn" data-value="1">1</button>
                <button class="tile-btn" data-value="*">*</button>
                <button class="tile-btn" data-value="A">A 蜗牛</button>
                <button class="tile-btn" data-value="B">B 蜘蛛</button>
                <button class="tile-btn" data-value="C">C 蚂蚱</button>
                <button class="tile-btn" data-value="D">D 瓢虫</button>
                <button class="tile-btn" data-value="E">E 蜜蜂</button>
                <button class="tile-btn" data-value="F">F 蝴蝶</button>
                <button class="tile-btn" data-value="G">G 甲虫</button>
                <button class="tile-btn" data-value="obstacle">障碍</button>
            </div>
        </div>
        
        <!-- 障碍设置提示 -->
        <div class="obstacle-hint" id="obstacle-hint">
            <strong>提示:</strong> 请点击两个相邻的格子来设置障碍物。您可以在内部格子之间或边界格子与外部之间设置障碍物。
        </div>
        
        <!-- 网格区域 -->
        <div class="grid-wrapper">
            <div class="grid" id="grid"></div>
            <div class="obstacle-layer" id="obstacle-layer"></div>
        </div>
        
        <!-- 障碍物列表 -->
        <div class="obstacle-list">
            <h3>障碍物列表:</h3>
            <div id="obstacle-items"><p style="color: #999;">暂无障碍物</p></div>
        </div>
        
        <!-- JSON输出区域 -->
        <div class="json-output">
            <h3>生成的JSON数据：</h3>
            <textarea id="json-content" readonly></textarea>
            <button onclick="generateJson()" style="margin-top: 10px;">生成JSON并复制</button>
        </div>
        
        <!-- 调试日志区域 -->
        <div class="debug-log">
            <h3>调试日志：</h3>
            <textarea id="debug-log" readonly></textarea>
        </div>
        
        <!-- 返回主页面链接 -->
        <!--
        <div class="back-link">
            <a href="index.html">返回主页面</a>
        </div>
        -->
    </div>
    
    <script>
        // 全局变量
        let gridWidth = 5;
        let gridHeight = 5;
        let currentValue = '1'; // 默认值为1（绿地）
        let obstacleMode = false;
        let obstacleFirstCell = null;
        let gridData = [];
        let barriers = [];
        let cellSize = 40; // 统一为40px，与CSS一致
        let borderSize = 2; // 网格间距
        let padding = 5; // 网格内边距
        let debugLog = ''; // 调试日志字符串
        let jsonStr = ''; // 全局JSON字符串变量
        
        // 添加日志到调试日志
        function addDebugLog(message) {
            const timestamp = new Date().toLocaleTimeString();
            debugLog += `[${timestamp}] ${message}\n`;
            // 更新日志显示
            updateDebugLogDisplay();
        }
        
        // 更新调试日志显示
        function updateDebugLogDisplay() {
            const debugLogElement = document.getElementById('debug-log');
            if (debugLogElement) {
                debugLogElement.value = debugLog;
                // 滚动到底部
                debugLogElement.scrollTop = debugLogElement.scrollHeight;
            }
        }
        
        // 初始化
        window.addEventListener('DOMContentLoaded', function() {
            // 确保DOM完全加载后再执行
            addDebugLog('DOM已加载完成');
            console.log('DOM已加载完成');
            
            // 检测是否为移动设备并调整单元格大小
            checkMobileAndAdjustSize();
            
            // 延迟执行，给移动设备更多时间完成DOM渲染
            setTimeout(function() {
                createGrid();
                initTileButtons();
            }, 100); // 100毫秒的延迟
        });
        
        // 检测移动设备并调整单元格大小
        function checkMobileAndAdjustSize() {
            const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
            console.log('是否为移动设备:', isMobile);
            addDebugLog(`是否为移动设备: ${isMobile}`);
            
            if (isMobile) {
                // 移动设备上使用较小的单元格大小
                cellSize = 32; // 移动设备上使用32px更合适
                console.log('移动设备上调整单元格大小为:', cellSize);
                addDebugLog(`移动设备上调整单元格大小为: ${cellSize}px`);
                
                try {
                    // 更新相关CSS样式
                    document.documentElement.style.setProperty('--cell-size', `${cellSize}px`);
                    addDebugLog('移动设备已调整显示设置');
                } catch (e) {
                    console.error('设置CSS变量失败:', e);
                    addDebugLog('设置CSS变量失败: ' + e.message);
                }
            } else {
                addDebugLog('桌面设备模式');
            }
        }
        
        // 创建网格 - 包含外围虚拟格子
        function createGrid() {
            try {
                gridWidth = parseInt(document.getElementById('grid-width').value);
                gridHeight = parseInt(document.getElementById('grid-height').value);
                if (isNaN(gridWidth) || gridWidth < 3 || gridWidth > 20 || 
                    isNaN(gridHeight) || gridHeight < 3 || gridHeight > 20) {
                    addDebugLog('请输入3-20之间的数字');
                    return;
                }
                
                const grid = document.getElementById('grid');
                const obstacleLayer = document.getElementById('obstacle-layer');
                const gridWrapper = document.querySelector('.grid-wrapper');
                
                // 检查DOM元素是否存在
                if (!grid || !obstacleLayer || !gridWrapper) {
                    console.error('网格容器元素不存在');
                    addDebugLog('网格容器元素不存在');
                    return;
                }
                
                // 设置网格尺寸（只设置一次）
                grid.style.gridTemplateColumns = `repeat(${gridWidth + 2}, ${cellSize}px)`;
                grid.innerHTML = '';
                obstacleLayer.innerHTML = '';
                
                // 记录调试信息
                addDebugLog(`创建网格: ${gridWidth}x${gridHeight}, 单元格大小: ${cellSize}px`);
                console.log(`创建网格: ${gridWidth}x${gridHeight}, 单元格大小: ${cellSize}px`);
                
                // 初始化网格数据
                gridData = [];
                for (let i = 0; i < gridHeight; i++) {
                    gridData[i] = [];
                    for (let j = 0; j < gridWidth; j++) {
                        gridData[i][j] = '0'; // 默认为空地
                    }
                }
                
                // 创建顶部虚拟行
                for (let j = 0; j < gridWidth + 2; j++) {
                    const virtualCell = document.createElement('div');
                    virtualCell.className = 'virtual-cell';
                    virtualCell.dataset.row = -1;
                    virtualCell.dataset.col = j - 1;
                    virtualCell.innerText = '';
                    virtualCell.addEventListener('click', onCellClick);
                    grid.appendChild(virtualCell);
                }
                
                // 创建中间行（包含真实格子和两侧虚拟格子）
                for (let i = 0; i < gridHeight; i++) {
                    // 左侧虚拟格子
                    const leftVirtualCell = document.createElement('div');
                    leftVirtualCell.className = 'virtual-cell';
                    leftVirtualCell.dataset.row = i;
                    leftVirtualCell.dataset.col = -1;
                    leftVirtualCell.innerText = '';
                    leftVirtualCell.addEventListener('click', onCellClick);
                    grid.appendChild(leftVirtualCell);
                    
                    // 真实格子
                    for (let j = 0; j < gridWidth; j++) {
                        const cell = document.createElement('div');
                        cell.className = 'grid-cell value-0'; // 添加value-0类
                        cell.dataset.row = i;
                        cell.dataset.col = j;
                        cell.innerText = '0';
                        cell.addEventListener('click', onCellClick);
                        grid.appendChild(cell);
                    }
                    
                    // 右侧虚拟格子
                    const rightVirtualCell = document.createElement('div');
                    rightVirtualCell.className = 'virtual-cell';
                    rightVirtualCell.dataset.row = i;
                    rightVirtualCell.dataset.col = gridWidth;
                    rightVirtualCell.innerText = '';
                    rightVirtualCell.addEventListener('click', onCellClick);
                    grid.appendChild(rightVirtualCell);
                }
                
                // 创建底部虚拟行
                for (let j = 0; j < gridWidth + 2; j++) {
                    const virtualCell = document.createElement('div');
                    virtualCell.className = 'virtual-cell';
                    virtualCell.dataset.row = gridHeight;
                    virtualCell.dataset.col = j - 1;
                    virtualCell.innerText = '';
                    virtualCell.addEventListener('click', onCellClick);
                    grid.appendChild(virtualCell);
                }
                
                // 重置障碍物
                barriers = [];
                updateObstacleList();
            } catch (error) {
                console.error('创建网格时出错:', error);
                addDebugLog('创建网格失败: ' + error.message);
            }
        }
        
        // 初始化图符按钮
        function initTileButtons() {
            const tileButtons = document.querySelectorAll('.tile-btn');
            tileButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // 移除所有选中状态
                    tileButtons.forEach(btn => btn.classList.remove('selected'));
                    
                    // 添加当前选中状态
                    this.classList.add('selected');
                    
                    // 设置当前值
                    currentValue = this.dataset.value;
                    
                    // 处理障碍模式
                    obstacleMode = currentValue === 'obstacle';
                    document.getElementById('obstacle-hint').style.display = obstacleMode ? 'block' : 'none';
                    
                    // 重置选中状态
                    if (obstacleFirstCell) {
                        obstacleFirstCell.cell.classList.remove('selected');
                        obstacleFirstCell = null;
                    }
                });
            });
            
            // 默认选中1
            document.querySelector('.tile-btn[data-value="1"]').click();
        }
        
        // 单元格点击事件
        function onCellClick(event) {
            const cell = event.target;
            const row = parseInt(cell.dataset.row);
            const col = parseInt(cell.dataset.col);
            
            if (obstacleMode) {
                handleObstacleSelection(row, col, cell);
            } else {
                // 只处理真实格子（非虚拟格子）
                if (row >= 0 && row < gridHeight && col >= 0 && col < gridWidth) {
                    // 更新单元格值
                    gridData[row][col] = currentValue;
                    cell.innerText = currentValue === ' ' ? '' : currentValue;

                    // 根据值添加或移除背景色类
                    if (currentValue === '0') {
                        cell.classList.add('value-0');
                    } else {
                        cell.classList.remove('value-0');
                    }                    
                }
            }
        }

        // 判断是否为真实格子
        function isRealCell(row, col) {
            return row >= 0 && row < gridHeight && col >= 0 && col < gridWidth;
        }
        // 处理障碍选择 - 支持边界障碍物
        function handleObstacleSelection(row, col, cell) {
            if (!obstacleFirstCell) {
                // 第一次点击，记录第一个单元格
                obstacleFirstCell = { row, col, cell };
                cell.classList.add('selected');
            } else {
                // 第二次点击，检查是否都为虚拟格子
                if(!isRealCell(row, col) && !isRealCell(obstacleFirstCell.row, obstacleFirstCell.col)){
                    addDebugLog('请选择至少一个真实的单元格来设置障碍');
                }else{
                    // 第二次点击，检查是否相邻
                    const firstRow = obstacleFirstCell.row;
                    const firstCol = obstacleFirstCell.col;
                    
                    // 检查是否相邻（上下左右）
                    const isAdjacent = 
                        (Math.abs(row - firstRow) === 1 && col === firstCol) || 
                        (Math.abs(col - firstCol) === 1 && row === firstRow);
                    
                    if (isAdjacent) {
                        // 添加障碍
                        barriers.push([firstCol, firstRow,col,row]);
                        
                        // 可视化显示障碍 - 在两个格子的接触边上绘制线条
                        drawObstacle(firstRow, firstCol, row, col);
                        
                        // 更新障碍物列表
                        updateObstacleList();
                    } else {
                        addDebugLog('请选择两个相邻的单元格来设置障碍');
                    }
                }
                
                // 重置
                obstacleFirstCell.cell.classList.remove('selected');
                obstacleFirstCell = null;
            }
        }
        
        // 绘制障碍物 - 支持边界障碍物
        function drawObstacle(r1, c1, r2, c2) {
            const obstacleLayer = document.getElementById('obstacle-layer');
            const line = document.createElement('div');
            line.className = 'obstacle-line';
            line.dataset.r1 = r1;
            line.dataset.c1 = c1;
            line.dataset.r2 = r2;
            line.dataset.c2 = c2;
            
            // 计算实际的位置偏移（考虑虚拟格子）
            const getRealPosition = (row, col) => {
                // 计算实际坐标
                const realRow = row + 1;
                const realCol = col + 1;
                // 计算位置
                const left = realCol * (cellSize + borderSize) + padding;
                const top = realRow * (cellSize + borderSize + 2) + padding; // y轴加上2，但不知道为什么x轴不需要加
                return { left, top, realRow, realCol };
            };
            
            // 获取两个格子的真实位置
            const pos1 = getRealPosition(r1, c1);
            const pos2 = getRealPosition(r2, c2);
            
            // 确定线条方向
            if (r1 === r2) {
                // 垂直方向的障碍（左右相邻的格子）
                line.classList.add('vertical');
                
                // 计算线条位置（位于两个格子之间,即第二个格子的左侧）
                const left = Math.max(pos1.left, pos2.left);
                const top = Math.min(pos1.top, pos2.top);
                
                line.style.left = `${left - 2}px`; // 减去线条宽度的一半
                line.style.top = `${top}px`;
            } else {
                // 水平方向的障碍（上下相邻的格子）
                line.classList.add('horizontal');
                
                // 计算线条位置（位于两个格子之间,即第二个格子的顶部）
                const left = Math.min(pos1.left, pos2.left);
                const top = Math.max(pos1.top, pos2.top);
                
                line.style.left = `${left}px`;
                line.style.top = `${top - 2}px`; // 减去线条宽度的一半
            }
            
            obstacleLayer.appendChild(line);
        }
        
        // 更新障碍物列表
        function updateObstacleList() {
            const obstacleItems = document.getElementById('obstacle-items');
            obstacleItems.innerHTML = '';
            
            if (barriers.length === 0) {
                obstacleItems.innerHTML = '<p style="color: #999;">暂无障碍物</p>';
                return;
            }
            
            barriers.forEach((barrier, index) => {
                const [r1, c1, r2, c2] = barrier;
                const item = document.createElement('div');
                item.className = 'obstacle-item';
                
                // 格式化显示坐标
                const formatCoord = (r, c) => {
                    if (r === -1) return `(上界,${c})`;
                    if (r === gridHeight) return `(下界,${c})`;
                    if (c === -1) return `(${r},左界)`;
                    if (c === gridWidth) return `(${r},右界)`;
                    return `(${r},${c})`;
                };
                
                item.innerHTML = `
                    障碍 ${index + 1}: ${formatCoord(r1, c1)} - ${formatCoord(r2, c2)}
                    <button class="remove-obstacle" onclick="removeObstacle(${index})">移除</button>
                `;
                obstacleItems.appendChild(item);
            });
        }
        
        // 移除障碍物
        function removeObstacle(index) {
            barriers.splice(index, 1);
            redrawAllObstacles();
            updateObstacleList();
        }
        
        // 重绘所有障碍物
        function redrawAllObstacles() {
            const obstacleLayer = document.getElementById('obstacle-layer');
            obstacleLayer.innerHTML = '';
            
            barriers.forEach(barrier => {
                const [r1, c1, r2, c2] = barrier;
                drawObstacle(r1, c1, r2, c2);
            });
        }
        
        // 清除所有障碍物
        function clearAllObstacles() {
            barriers = [];
            redrawAllObstacles();
            updateObstacleList();
            addDebugLog('所有障碍物已清除');
        }
        
        // 生成JSON数据
        function generateJson() {
            try {
                //gridData转换成行字符串列表
                const board = gridData.map(row => row.join(''));
                // 生成JSON字符串
                jsonStr = JSON.stringify({
                    width: gridWidth,
                    height: gridHeight,
                    board: board,
                    barriers: barriers,
                    step_limit: parseInt(document.getElementById('step-limit').value)
                }, null, 2);
                
                // 尝试获取来源窗口
                const opener = window.opener || window.parent;
                
                // 检查是否存在来源窗口且没有被关闭
                if (opener && !opener.closed) {
                    try {
                        // 使用postMessage传递数据
                        opener.postMessage({
                            type: 'mapData',
                            jsonData: jsonStr
                        }, '*');
                        addDebugLog('地图数据已成功传递到主页面');
                        
                        // 自动关闭编辑器窗口（可选）
                        //setTimeout(() => window.close(), 1000);
                    } catch (e) {
                        console.error('无法传递数据回主页面:', e);
                        handleCopyFallback(jsonStr);
                    }
                } else {
                    // 检查URL参数，判断是否从主页面跳转而来
                    const urlParams = new URLSearchParams(window.location.search);
                    if (urlParams.get('return') === 'true') {
                        // 移动设备上，将数据保存到localStorage并返回
                        try {
                            localStorage.setItem('mapEditorData', jsonStr);
                            addDebugLog('地图编辑完成，即将返回主页面');
                            setTimeout(() => window.location.href = 'index.html?data=1', 1000);
                        } catch (e) {
                            console.error('无法保存数据:', e);
                            handleCopyFallback(jsonStr);
                        }
                    } else {
                        // 如果不是从index.html打开的，则只复制到剪贴板
                        handleCopyFallback(jsonStr);
                    }
                }
            } catch (e) {
                console.error('生成JSON时出错:', e);
                addDebugLog('生成JSON数据失败');
            }
        }

        // 抽取复制到剪贴板的逻辑为单独函数
        function handleCopyFallback(jsonStr) {
            navigator.clipboard.writeText(jsonStr).then(function() {
                addDebugLog('JSON数据已复制到剪贴板，请手动粘贴到主页面');
            }).catch(function(err) {
                console.error('复制失败:', err);
                // 显示JSON数据让用户手动复制
                document.getElementById('json-content').value = jsonStr;
                addDebugLog('生成JSON数据失败，请手动复制上方文本框中的内容');
            });
        }
    </script>
</body>
</html>